<template>
  <view class="containner">
    <view class="top" :style="{ 'border-radius': round + 'rpx' }">
      <view class="top-view"></view>
    </view>
    <img class="coverImage" :src="overview.coverImageUrl" alt="" />
    <view class="margin-box">
      <view class="info-title-box">
        <text class="info-title">{{ overview.poiName }}</text>
        <!-- <view class="info-title-score" v-if="overview.hotness">
          <text class="score-text">{{overview.hotness}}</text>分
        </view> -->
      </view>
      <view class="tagList" v-if="overview.tags && overview.tags.length > 0">
        <view
          class="tagItem"
          v-for="(tagItem, tagIndex) in overview.tags"
          :key="tagIndex"
          >{{ tagItem }}</view
        >
      </view>
    </view>
    <view class="open-time margin-box">
      <view class="open-time-item" v-if="overview.businessTime">
        <img
          class="icon"
          src="https://cdn1.visiotrip.com/h5AndMini/2023-09-14/open_time.png"
          mode="aspectFill"
          alt=""
          srcset=""
        />{{ overview.businessTime }}
      </view>
      <view class="open-time-item" @click="viewMap"
            :data-spmCntSuffix="'.openTime@1.viewMap@'"
						:data-custom="1"
						:data-spm="{}">
        <img
          class="icon"
          src="https://cdn1.visiotrip.com/h5AndMini/2023-09-14/address.png"
          mode="aspectFill"
        />
        {{ overview.address }}
        <image
          src="https://cdn1.visiotrip.com/h5AndMini/2024-09-19/ai-shop-right.png"
          mode="scaleToFill"
          class="address-icon"
        />
      </view>
      <block v-if="overview.trafficList && overview.trafficList.length > 0">
        <view class="open-time-item subway" v-for="(item, itemIdx) in overview.trafficList" :key="itemIdx">
          <view class="icon"></view>{{ item }}
        </view>
      </block>
    </view>
    <block v-if="overview.tips">
      <view class="hot margin-box">
        <view class="title-box">
          <view class="line"></view>
          <text class="title">{{ overview.tipsTitle }}</text>
        </view>
        <view class="content">
          <text class="text">{{ overview.tips }}</text>
        </view>
      </view>
    </block>
    <block v-if="overview.comment">
      <view class="hot margin-box">
        <view class="title-box">
          <view class="line"></view>
          <text class="title">{{ overview.commentTitle }}</text>
        </view>
        <view class="content">
          <rich-text class="text" :nodes="overview.introduction"></rich-text>
        </view>
      </view>
    </block>
  </view>
</template>

<script>
export default {
  props: {
    overview: {
      type: Object,
    },
    round: {
      type: Number,
      default: 20,
    },
  },
  components: {},
  computed: {},
  data() {
    return {
      payInfo: {
        cuisine: "港式粤菜 | 车仔面 | 烧鹅 | 茶餐备份",
        price: "¥100-200",
        payment: "AlipayHK、支付宝、现金",
      },
      openTime: {
        time: "营业时间：周一至周日 08:00",
        tel: "66555569",
        address: "沙田正街19号新城市广场一期1楼113号铺",
        subway: "港铁湾仔站C出口, 步行约6分钟",
      },
      dishes: [
        {
          img: "",
          name: "美国安格斯封门柳",
        },
        {
          img: "",
          name: "黑芝麻西多士",
        },
        {
          img: "",
          name: "车仔面",
        },
      ],
    };
  },
  onLoad() {},
  methods: {
    viewMap() {
      let latitude = this.overview.latitude
      let longitude = this.overview.longitude
      let title = this.overview.address
      let data = {
          latitude: Number(latitude),
          longitude: Number(longitude),
          name: title,
          success: function () { },
      };
      this.$openLocation(data)
    },
  },
};
</script>

<style lang="scss" scoped>
.margin-box {
  width: 694rpx;
  margin: 0 auto;
}
.border-box {
  width: 100%;
  height: 20rpx;
  background: #f5f6f7;
}
.containner {
  padding-bottom: 40rpx;
  position: relative;
  border-radius: 48rpx 48rpx 0 0;
  background: linear-gradient( 180deg, #FFFFFF 0%, #FFFFFF 39%, #F6F6F9 100%);;
  .top {
    width: 100%;
    // height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 20rpx;
    .top-view {
      width: 46rpx;
      height: 7rpx;
      background: #ffffff;
      box-shadow: 0rpx 2rpx 4rpx 0rpx rgba(0,0,0,0.16);
      border-radius: 4rpx;
    }
  }
  .coverImage {
    width: 100%;
    height: 498rpx;
    margin: 0 auto;
    display: block;
    border-radius: 48rpx 48rpx 0 0;
  }
  .info-title-box {
    margin: 0 auto;
    display: flex;
    align-items: center;
    padding-top: 40rpx;
    padding-bottom: 12rpx;
    .info-title {
      font-size: 40rpx;
      color: $sl-color-black;
      font-weight: 600;
    }
    .info-title-score {
      width: 88rpx;
      height: 40rpx;
      margin-left: 12rpx;
      background: url('https://cdn1.visiotrip.com/h5AndMini/2024-09-19/ai-shop-icon.png');
      background-size: cover;
      text-align: center;
      font-size: 20rpx;
      color: #131328;
      line-height: 20rpx;
      .score-text {
        font-weight: 600;
        font-size: 28rpx;
        color: #131328;
        line-height: 40rpx;
      }
    }
  }
  .tagList {
    display: flex;
    flex-wrap: wrap;
    margin-left: 5rpx;
    .tagItem {
      padding: 0 14rpx;
      height: 40rpx;
      border-radius: 4rpx;
      color: #F18C34;
      font-size: 24rpx;
      line-height: 40rpx;
      margin: 0 12rpx 10rpx 0;
      background: #FFFBF4;
    }
  }

  .open-time {
    padding: 30rpx 0;
    border-top: 1rpx solid #dddddd;
    border-bottom: 1rpx solid #dddddd;
    font-size: 24rpx;
    font-weight: 400;
    color: $sl-color-grey;
    margin-top: 30rpx;
    line-height: 34rpx;

    .open-time-item {
      margin-bottom: 12rpx;
      display: flex;
      align-items: center;
      .address-icon {
        width: 26rpx;
        height: 26rpx;
      }
    }
  }

  .icon {
    width: 25rpx;
    height: 25rpx;
    margin-right: 15rpx;
  }

  .recommended-dishes {
    .title-box {
      padding-top: 30rpx;
      justify-content: end;

      .line {
        width: 5rpx;
        height: 28rpx;
        background: $sl-color-dark-grey;
        border-radius: 4rpx;
      }

      .title {
        padding-left: 20rpx;
        font-size: 32rpx;
        font-family: AppleColorEmoji;
        color: $sl-color-black;
        line-height: 42rpx;
      }
    }

    .dishes-list {
      display: flex;

      .dishe-item {
        flex: 1;
        margin-right: 16rpx;

        .pic {
          width: 232rpx;
          height: 174rpx;
          background: #d8d8d8;
          border-radius: 10rpx;
        }

        .name {
          font-size: 24rpx;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #172f59;
        }
      }
    }
  }

  .hot {
    .title-box {
      padding-top: 30rpx;
      justify-content: flex-start;
      margin-bottom: 22rpx;

      .line {
        width: 5rpx;
        height: 28rpx;
        background: $sl-color-black;
        border-radius: 4rpx;
      }

      .title {
        padding-left: 20rpx;
        font-size: 32rpx;
        font-family: AppleColorEmoji;
        color: $sl-color-black;
      }
    }

    .content {
      background: #FFFFFF;
      border-radius: 26rpx;
      padding: 22rpx;
      .text {
        color: $sl-color-grey;
        font-size: 28rpx;
        line-height: 40rpx;
      }
    }
  }
}
</style>
